<template>
    <v-chart class="chart" :option="option" autoresize />
  </template>
  
  <script setup>
  import { use } from 'echarts/core'
  import { CanvasRenderer } from 'echarts/renderers'
  import { LineChart } from 'echarts/charts'
  import { GridComponent } from 'echarts/components'
  
  import { ref } from 'vue'
  
  use([CanvasRenderer, LineChart, GridComponent])
  
  const option = ref({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      show: false,
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        areaStyle: {
          color: 'purple',
          opacity: 1,
        },
        itemStyle: {
          opacity: 0,
        },
        lineStyle: {
          color: 'purple',
        },
        smooth: true,
      },
    ],
  })
  </script>
  
  <style scoped>
  .chart {
    width: 400px;
    height: 300px;
  }
  </style>
 
 <style lang="scss" scoped>
 .container {
     height: calc(100vh - 80px);
     padding: 0 10%;
     background-color: #00668a;
 
     h2,
     p {
         color: white;
         /* 改变文字颜色为白色 */
     }
 
     .weather-info {
         padding: 30px 0;
         text-align: center;
         line-height: 30px
     }
 
 }
 </style>